require(['init'], function () {
  var id = location.search.urlToObj().id;
  function BannerInfo(options) {
    options = options || {};
    this.data = options.data || {};
    this.$dom = $('<div class="formList"></div>');

    this.init(this.configList);
  }
  BannerInfo.prototype = {
    configList: [
          {
            title: i18next.t('table.lessonsname'),
            content: {
              init: function ($content, root) {
                root.$titleInput = $('<input type="text" class="form-control" style="width: 400px" name="title">').appendTo($content);
                root.$titleInput.on('change', function () {
                  root.data.title = $.trim(root.$titleInput.val());
                })
              },
              update: function ($content, root, formData) {
                root.$titleInput.val(formData.title).change();
              }
            }
          },
          {
            title: i18next.t('table.lessonsintroduce'),
            content: {
              init: function ($content, root) {
                root.$introInput = $('<textarea type="text" class="form-control" style="width:403px;height:100px;" name="intro"></textarea>').appendTo($content);
                root.$introInput.on('change', function () {
                  root.data.intro = $.trim(root.$introInput.val());
                })
              },
              update: function ($content, root, formData) {
                root.$introInput.val(formData.intro).change();
              }
            }
          },

      {
        title:i18next.t('table.productclassnumber'),
        content: {
          init: function ($content, root) {
            root.$schedulesInput = $('<input type="text" class="form-control" style="width: 400px" name="schedules">').appendTo($content);
            root.$schedulesInput.on('change', function () {
              root.data.schedules = $.trim(root.$schedulesInput.val());
            })
          },
          update: function ($content, root, formData) {
            root.$schedulesInput.val(formData.schedules).change();
          }
        }
      },
      {
        title:i18next.t('table.liveaddress'),
        content: {
          init: function ($content, root) {
            root.$liveuriInput = $('<input type="text" class="form-control" style="width:400px;" name="liveuri">').appendTo($content);
            root.$liveuriInput.on('change', function () {
              root.data.liveuri = $.trim(root.$liveuriInput.val());
            })
          },

          update: function ($content, root, formData) {
              root.$liveuriInput.val(formData.liveuri).change();
            }
        }
      },
      {
        title: i18next.t('table.showaddress'),
        content: {
          init: function ($content, root) {
            root.$hasliveuriInput = $('<span class="icon icon-size-16 icon-checkbox" data-type="checkbox" style="position:relative;top: 4px;width:18px;!important">\
              <input type="checkbox" data-checkedmax="1" name="hasliveuri" value="1">\
            </span></br></br>').appendTo($content);
            root.$hasliveuriInput.on('change', function () {
             root.data.hasliveuri = root.$hasliveuriInput.find('input').prop('checked') ? 1: 0;
             //console.log(root.data.hasliveuri)
           })
        },
        update: function ($content, root, formData) {
            if(formData.hasliveuri==1){
            root.$hasliveuriInput.find('[type="checkbox"]').prop('checked', true).parent().addClass('checked')
            }
          }
        }
      },

      {
        title:  i18next.t('table.auditionaddress'),
        content: {
          init: function ($content, root) {
          root.$videouriInput = $('<input type="text" class="form-control" style="width: 400px;" name="videouri">').appendTo($content);
          root.$videouriInput.on('change', function () {
              root.data.videouri = $.trim(root.$videouriInput.val());
          })
        },
          update: function ($content, root, formData) {
            root.$videouriInput.val(formData.videouri).change();
          }
        }
      },
      {
        title: i18next.t('table.showaudition'),
        content: {
          init: function ($content, root) {
            root.$hasvideouriInput = $('<span class="icon icon-size-16 icon-checkbox" data-type="checkbox" style="position:relative;top: 4px;width:18px;!important">\
              <input type="checkbox" data-checkedmax="1" name="hasvideouri" value="1" id="hasvideouri">\
            </span>').appendTo($content);
            root.$hasvideouriInput.on('change', function () {
               root.data.hasvideouri = root.$hasvideouriInput.find('input').prop('checked') ? 1: 0;
          })
        },
        update: function ($content, root, formData) {
            if(formData.hasvideouri==1){
              root.$hasvideouriInput.find('[type="checkbox"]').prop('checked', true).parent().addClass("checked");
            }
          }
        }
      },
    ],
    createFormLi: function (liConfig) {
      var $formLi = $('<div class="formLi"></div>').appendTo(this.$dom);
      $('<div class="formTitle"></div>').html('<span class="titleText">'+ liConfig.title +'</span>').appendTo($formLi);
      var $formContent = $('<div class="formContent"></div>').appendTo($formLi);
      liConfig.content.init($formContent, this);
      if(liConfig.content.update) {
        liConfig.content.update($formContent, this, this.data);
      }
    },

    init: function (liConfigList) {
      $.each(liConfigList, function (i, cur) {
        this.createFormLi(cur)
      }.bind(this));

    },

    getDefaultData: function () {
      return {
        startTime: new Date().getTime()
      }
    }
  }


  function getBannerList() {
    ajaxMethod({
      url: '/api/product/'+id+'/lessons',
      success: function (data) {
        console.log(data);
        var $listTable = $('#product_class').html('')
      $thead = $('<thead>\
          <tr>\
            <th>'+i18next.t('table.no')+'</th>\
            <th><p class="product_width" >'+i18next.t('table.lessonsname')+'</p></th>\
            <th><p class="product_width" >'+i18next.t('table.lessonsintroduce')+'</p></th>\
            <th>'+i18next.t('table.productclassnumber')+'</th>\
            <th><p class="product_width" >'+i18next.t('table.liveaddress')+'</p></th>\
            <th><p class="product_width" >'+i18next.t('table.auditionaddress')+'</p></th>\
            <th>'+i18next.t('table.creater')+'</th>\
            <th>'+i18next.t('table.modifier')+'</th>\
            <th>'+i18next.t('table.handle')+'</th>\
          </tr>\
        </thead>').appendTo($listTable)

        var $tbody = $('<tbody></tbody>').appendTo($listTable)
        $.each(data, function (i, item) {
         var $item = $('<tr></tr>')
          $item.append('<td>'+ (i+1) +'</td>')
          $item.append('<td><p class="product_width" >'+ (item.title || '') +'</p></td>')
          $item.append('<td><p class="product_width" >'+ (item.intro||'') +'</p></td>')
          $item.append('<td>'+ (item.schedules||'') +'</textarea></td>')
          $item.append('<td><p class="product_width" >'+ (item.liveuri||'') +'</p></td>')
          $item.append('<td><p class="product_width" >'+ (item.videouri||'') +'</p></td>')
          $item.append('<td>'+ (item.created_by||'') +'</td>')
          $item.append('<td>'+ (item.updated_by||'') +'</td>')
          var $handle = $('<td></td>').appendTo($item)
          var $edit = $('<span class="btn btn-primary btn-sm btn-inverse ml5">'+i18next.t('table.compile')+'</span>').appendTo($handle)
          $edit.on('click', function () {
            var bannerInfo = new BannerInfo({
              data: {
                productid: id,
                title: item.title,
                intro: item.intro,
                schedules:item.schedules,
                liveuri:item.liveuri,
                videouri:item.videouri,
                hasliveuri:item.hasliveuri,
                hasvideouri:item.hasvideouri
              }
            })
            var popUpBox=new PopUpBox({
              type:'dom',
              style:'default contentScroll',
              submitBtnType:'confirm',
              titleText:''+i18next.t('popupbox.pleaseselect')+'',
              drag:true,
              show: true,
              content: bannerInfo.$dom,
              callback:{
                yes: function (e) {
                  console.log(bannerInfo.data);
                  ajaxMethod({
                    url: '/api/product/' +id+'/lesson/'+item.id,
                    method: 'put',
                    data: bannerInfo.data,
                    success: function (data, status) {
                      if(status.code == 0) {
                        getBannerList()
                        popUpBox.close()
                      }
                    }
                  })
                  return false;
                }
              },
              position:{
                width:690,
                height:574
              }
            })
          })

          var $delete = $('<span class="btn btn-danger btn-sm btn-inverse">'+i18next.t('table.delete')+'</span>').appendTo($handle)
          $delete.on('click', function () {
            _Confirm('',''+i18next.t('popupbox.del')+' ？', function () {
              ajaxMethod({
                url: '/api/product/'+id+'/lesson/'+item.id,
                method: 'delete',
                success: function(data, status) {
                    if(status.code == 0) {
                    getBannerList()
                  }
                }
              })
            })
          })
         $tbody.append($item)
        })
      }
    })
  }

  $("#add_course").on('click',function(){
    var bannerInfo = new BannerInfo()
    var popUpBox=new PopUpBox({
      type:'dom',
      style:'default contentScroll',
      submitBtnType:'confirm',
      titleText:i18next.t('popupbox.pleaseselect'),//请选择
      drag:true,
      show: true,
      content: bannerInfo.$dom,
      callback:{
        yes: function (e) {
          console.log(bannerInfo.data);
          ajaxMethod({
            url: '/api/product/'+id+'/lesson',
            method: 'post',
            data: bannerInfo.data,
            success: function (data, status) {
              console.log(data)
              if(status.code == 0) {
                getBannerList()
                popUpBox.close()
              }
            }
          })
          return false;
        }
      },
      position:{
        width:690,
        height:574
      }
    })
  })
  getBannerList()
})
